<h3 class="page-heading">Security Credentials</h3>

<div class="gf-form-group">
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-9">SecretId</span>
      <input class="gf-form-input width-30" type="text" ng-model="ctrl.current.jsonData.secretId"
        required></input>
      <info-popover mode="right-absolute">
        <p>SecretId is used to identify the identity of the API caller.</p>
        <a target="_blank" href="https://console.cloud.tencent.com/cam/capi">
          Click here for more information.
        </a>
      </info-popover>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-9">SecretKey</span>
      <input class="gf-form-input width-30" type="password" ng-model="ctrl.current.jsonData.secretKey"></input>
      <info-popover mode="right-absolute">
        <p>SecretKey is used to encrypt the signature and validate the signature of the server-side.</p>
        <a target="_blank" href="https://console.cloud.tencent.com/cam/capi">
          Click here for more information.
        </a>
      </info-popover>
    </div>
  </div>
</div>

<h3 class="page-heading">Monitor Services</h3>
<div class="gf-form-group">
  <div class="gf-form" ng-repeat="service in ctrl.current.jsonData.services">
    <span class="gf-form-label width-20">
      {{service.label}}
      <info-popover mode="right-normal">
        <a target="_blank" href="{{service.href}}">
          Click here for more information of {{service.label}}.
        </a>
      </info-popover>
    </span>
    <gf-form-switch class="gf-form" label-class="width-7" checked="ctrl.current.jsonData[service.service]" switch-class="max-width-5">
    </gf-form-switch>
  </div>
</div>